<template>
  <div v-loading="loading"
       :element-loading-background="background"
       class="mainDefault"
       :class="titleColor"
       element-loading-spinner="el-icon-loading"
       :element-loading-text="title"
       :fullscreen="false">
    <slot></slot>
  </div>
</template>

<script>
/*
* loading 是否加载
* background 加载的背景
* title 加载的文字
* titleColor 文字和icon的颜色 蓝色默认可以随意传值
*/
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: 'rgba(0, 0, 0, 0.1)'
    },
    title: {
      type: String,
      default: '正在加载中...'
    },
    titleColor: {
      type: String,
      default: 'black'
    }
  }
}
</script>

<style scoped lang="scss">

$colors: white, black, red;

.mainDefault {
  padding: 0;

  @each $i in $colors {
    &.#{$i} {
      ::v-deep .el-loading-spinner {
        i, p {
          color: $i;
        }
      }
    }
  }

}
</style>
